<template>
  <div class="form-setting-panel form-currency-setting">
    <!-- start 标题 -->
    <div class="form-setting-group form-common-setting">
      <h3 class="form-setting-panel-title">{{ field.displayName }}</h3>
      <div class="form-design-warning">{{$t('task.detail.partReturnWarning')}}</div>
    </div>
    <!-- end 标题 -->

    <!-- start 帮助提示 -->
    <form-describe-setting
      :field="field"
      :mode="mode"
			:title="t('common.base.helpTips')"
			:placeHolder="t('common.placeholder.input2')"
      @input="updateForDom"
    ></form-describe-setting>
    <!-- end 帮助提示 -->

    <!-- start 备件关联显示字段 -->
    <div class="form-setting-group form-setting-item">
      <h4 class="form-item-title">{{ $t('task.setting.spareReturnLabel1') }}</h4>
      <div class="form-item-box">
        <div class="form-setting-item">
          <el-select
            class="part-return-select"
            v-model="selectMaterial"
            value-key="fieldName"
            multiple
            :multiple-limit="10"
          >
            <el-option
              v-for="item in materialFieldOptions"
              :key="item.fieldName"
              :label="item.displayName"
              :value="item"
              :disabled="checkFieldDisabledHandler(item)"
            ></el-option>
          </el-select>
        </div>
      </div>
    </div>
    <!-- end 物料关联显示字段 -->

    <!-- 返还规则 start -->
    <div class="form-setting-group form-setting-item">
      <h4 class="form-item-title">{{$t('common.base.check')}}</h4>
      <div class="form-item-box">
        <!-- {{field}}1 -->
        <el-checkbox :value="field.setting.usedSparePartMustReturn" @input="updateSetting(...arguments,'usedSparePartMustReturn')">
          {{$t('task.detail.partReturnCheckbox1')}}
        </el-checkbox>
        <el-checkbox :value="field.setting.applySparePartMustReturn" @input="updateSetting(...arguments,'applySparePartMustReturn')">
          {{$t('task.detail.partReturnCheckbox2')}}
        </el-checkbox>
        <el-checkbox :value="field.setting.onlySpartListReturn" @input="updateSetting(...arguments,'onlySpartListReturn')">
          {{$t('task.detail.partReturnCheckbox3')}}
        </el-checkbox>
      </div>
    </div>
    <!-- 返还规则 end -->
  </div>
</template>

<script>
import SettingMixin from '@src/component/form/mixin/setting';
import { settingProps } from '@src/component/form/components/props';
import { FORM_FIELD_NUMBER_MAX_LENGTH } from '@src/model/const/Number.ts';
// util
import { findComponentUpward } from '@src/util/assist';
import * as FormUtil from '@src/component/form/util';
import { t } from '@src/locales';

export default {
  name: 'form-spare-parts-return-setting',
  mixins: [SettingMixin],
  props: settingProps,
	data() {
    return {
      fixedFieldValues: ['name', 'serialNumber', 'catalogId'],
    }
  },
  computed: {
    // 关联物料下拉框数据
    materialFieldOptions() {
      let { sparePartFields } = findComponentUpward(this, 'form-design') || {};
      
      if(!sparePartFields.some(x => x.fieldName === 'repertoryId')) {
        sparePartFields.push(
          {
            isSystem: 1,
            fieldName: 'repertoryId',
            field: 'repertoryId',
            displayName: t('task.detail.partReturnField1'),
            label: t('task.detail.partReturnField1'),
            formType: 'text',
            width: '150px',
            isNull: 1,
          },{
            isSystem: 1,
            fieldName: 'number',
            field: 'number',
            displayName: t('task.detail.partReturnField2'),
            label: t('task.detail.partReturnField2'),
            width: '150px',
            formType: 'text',
            isNull: 1,
          },
        )
      }
      
      sparePartFields.forEach(x => {
        if(x.fieldName === 'serialNumber') {
          x.displayName = t('task.detail.partReturnField3');
          x.width = 150;
        }else if(x.fieldName === 'name') {
          x.displayName = t('task.detail.partReturnField4');
          x.width = 150;
        }
        if(x.fieldName === 'type') {
          x.fieldName = 'primaryType';
          x.formType = 'primaryType';
        }
      })
      return FormUtil.toFormField(sparePartFields);
    },
    sparePartFieldList() {
      return this.field?.setting?.sparePartFieldList || [];
    },
    selectMaterial: {
      get() {
        return this.sparePartFieldList;
      },
      set(value) {
        this.updateSetting(value, 'sparePartFieldList');
      },
    }
  },
  methods: {
    updateForDom(event){
      let el = event.target;
      let prop = el.dataset.prop;
      let value = el.value;
      
      this.update(value, prop)
    },
    update(value, prop, isSetting = false) {
      this.$emit('input', {value, prop, isSetting});
    },
    // 更新setting
    updateSetting(value, type){
      this.$set(this.field.setting, type, value)
    },
    // 初始化物料关联显示字段
    initRelationFields() {
      // 无值时设置默认值
      if (!this.selectMaterial.length) {
        let fields = this.materialFieldOptions.filter(field =>
          this.checkFieldDisabledHandler(field)
        );
        this.selectMaterial = fields;
        return fields;
      }

      // 有值时需过滤掉已被删除的关联显示字段
      let materialFieldValue = this.selectMaterial.filter(item => {
        let index = this.materialFieldOptions.findIndex(
          field => item.fieldName === field.fieldName
        );
        return index > -1;
      });

      return materialFieldValue;
    },
    // 物料编号, 物料名称默认选中，禁止点击
    checkFieldDisabledHandler(field) {
      const fieldNameArr = ['serialNumber', 'name', 'number', 'repertoryId'];
      let fieldName = field.fieldName;

      return fieldNameArr.includes(fieldName);
    },
  },
  mounted() {
    this.selectMaterial = this.initRelationFields();
  }
};
</script>

<style lang="scss" scoped>
::v-deep .part-return-select {
  width: 100%;
  .el-tag:nth-child(1),
  .el-tag:nth-child(2),
  .el-tag:nth-child(3),
  .el-tag:nth-child(4) {
    .el-tag__close {
      display: none;
    }
  }
}
</style>